<template>
  <div class="list">
    <ul class="order">
      <li v-for="item in orders" :key="item.id" @click="listOrder(item.id)">
        <span>{{item.text}}</span>
        <span class="arrow"></span>
      </li>
    </ul>
    <Item v-for="item in dealList" :data="item" :key="item.id"></Item>
    <div class="load-more" @click="showOther" v-show="others.length">
      <span>查看其他{{others.length}}条团购</span>
      <span class="arrow">
        <span class="arrow white"></span>
      </span>
    </div>
  </div>
</template>
<style lang="scss">
@import "../base.scss";
.list {
  .order {
    display: flex;
    background-color: #fff;
    li {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: #333;
      line-height: 30px;
      height: 30;

      border-right: 1px solid #b7b7b7;
      border-top: 1px solid #b7b7b7;
      border-bottom: 1px solid #b7b7b7;
      &:last-child {
        border-right: none;
      }
      .arrow {
        @include arrow(4px);
        position: relative;
        left: 5px;
        top: -1px;
      }
    }
  }
  .load-more {
    background-color: #fff;
    text-align: center;
    color: $navColor;
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    font-size: 16px;
    .arrow {
      @include arrow(8px, $navColor);
      position: relative;
      top: 1px;
      left: 10px;
      .white {
        position: absolute;
        top: -10px;
        left: -8px;
        border-top-color: #fff;
      }
    }
  }
}
</style>

<script>
import Item from "../components/item.vue";
export default {
  components: { Item },
  data() {
    return {
      orders: [
        { text: "价格排序", id: "price" },
        { text: "销量排序", id: "sales" },
        { text: "好评排序", id: "evaluate" },
        { text: "优惠排序", id: "discount" }
      ],
      list: [],
      others: []
    };
  },
  computed: {
    dealList() {
      return this.list.filter(
        item => item.title.indexOf(this.$store.state.search) >= 0
      );
    }
  },
  methods: {
    showOther() {
      this.list = this.list.concat(this.others);
      this.others = [];
    },
    listOrder(id) {
      if (id == "discount") {
        return this.list.sort((a, b) => {
          return a.originPrice - a.price - (b.originPrice - b.price);
        });
      }
      this.list.sort((a, b) => {
        return b[id] - a[id];
      });
    }
  },
  created() {
    this.$http
      .get("/data/list.json?id=" + this.$route.params.id)
      .then(({ data }) => {
        this.list = data.slice(0, 3);
        this.others = data.slice(3);
      });
  }
};
</script>
